import { View, StyleSheet } from "react-native"
import { BtnItem } from "../../../mobx/home"
import { ObserverButton } from "../../../components"
import { dpw10, dpw16, dpw4, dpw8 } from "../../../constants"
import { memo } from "react"

interface BtnListProps {
    list: BtnItem[]
    scrollToTop: Function
    navigation: any
    idx?: number
    Title?: string
    changeData: Function
}

const BtnListDom = (props: BtnListProps) => {
    const { list, scrollToTop, navigation, idx, Title, changeData } = props
    
    // 按钮点击事件
    const onPress = (info: BtnItem) => {
        if (info.Type === 3) { // 置顶
            scrollToTop()
        } else if (info.Type === 1) { // 查看更多
            switch (info.BtnType) {
                case 1:
                    navigation.navigate('Category', { typeId: idx, bId: info.BtnBindId })
                    break;
                // case 2:
                //     navigation.navigate('today-update', { typeId: idx })
                //     break;
                // case 3: //
                //     navigation.navigate('rank', { typeId: idx })
                //     break;
                case 4:
                    navigation.navigate('theme-selected', { bId: info.BtnBindId, typeId: idx })
                    break;
                case 5: 
                    navigation.navigate('vip-new', { typeId: idx, title: Title })
                    break;
                case 6: 
                    navigation.navigate('view-more', { typeId: idx, title: Title })
                    break;
                default:
                    break;
            }
        } else if (info.Type === 2) { // 换一换
            switch (info.BtnType) {
            case 1:
                changeData(info.BtnBindId)
                break;
            // case 2:
            //     navigation.navigate('today-update', { typeId: idx })
            //     break;
            // case 3: //
            //     navigation.navigate('rank', { typeId: idx })
            //     break;
            case 4:
                break;
            case 5:
                changeData(info.BtnType)
                break;
            case 6:
                changeData(info.BtnType)
                break;
            default:
                break;
            }
        }
    }
   
    if (Array.isArray(list) && list.length > 0) {
        return (
            <View style={styles.box}>
                {list.map((it, idx) => (
                    <View key={it.BtnId + "btn" + idx} style={{ flex: 1, marginRight: idx === 0 ? dpw10 : 0 }}>
                        <ObserverButton tKey={it.Title} type="more" onPress={() => { onPress(it) }} />
                    </View>
                ))}
            </View>
        )
    }
    return null
}

export default memo(BtnListDom)

const styles = StyleSheet.create({
    box: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingBottom: dpw16,
        marginHorizontal: dpw4,
    }
})
